<template>
    <view class="selecttree">
        <view class="checkedBox">
            <view class="checkedItem" v-for="(item,index) in cheackedList" :key="index" @click.stop="gotolishi(item,index)">
                {{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>
        <view class="radioBox">

            <u-radio-group v-model="radiovalue" placement="column" @change="groupChange">
                <view class="item" v-for="(item, index) in treeList" :key="index" @click="nextLevel(item)">
                    <u-radio :customStyle="{marginBottom: '8px'}" :name="{item:item}">
                    </u-radio>
                    <view class="jiantou">
                        <view>
                            {{item.name}}
                        </view>
                        <u-icon v-if="item.hasChild" name="arrow-right"></u-icon>
                    </view>
                </view>
            </u-radio-group>
        </view>
        <view class="buttonBox">
            <u-button type="primary" text="确定" @click="goback()"></u-button>
        </view>
    </view>
</template>

<script>
import XiaoluTree from '@/components/xiaolu-tree/tree.vue';
import { treeNode } from './data.js'

export default {
    components: {
        XiaoluTree
    },
    data() {
        return {
            // 基本案列数据
            radiolist1: [{
                name: '苹果',
                disabled: false
            },
            {
                name: '香蕉',
                disabled: false
            },
            {
                name: '橙子',
                disabled: false
            }, {
                name: '榴莲',
                disabled: false
            }
            ],
            treeList: [],
            radiovalue: '全部',
            radioId: 0,
            radioName: '',
            cheackedList: [
                {
                    name: '全部',
                    id: 0
                }
            ]
        }
    },
    onLoad(option) {
        let { prop, arr } = option
        // #ifdef H5
        let checkList = JSON.parse(decodeURIComponent(arr));
        // // #endif
        // // #ifdef MP-QQ||MP-WEIXIN||APP-NVUE||APP-PLUS
        // let checkList = JSON.parse(arr);
        // // #endif
        // this.prop = JSON.parse(prop)
        this.getTreeBy(0)
    },
    methods: {
        gotolishi(item, index) {
            console.log(item)
            // if (index) {
            this.cheackedList.splice(index + 1, this.cheackedList.length - index - 1)
            // }
            this.getTreeBy(item.id)

        },
        goback() {
            var pages = getCurrentPages();
            var currPage = pages[pages.length - 1]; //当前页面
            var beforePage = pages[pages.length - 2]; //上一个页面
            console.log(beforePage)
            beforePage.onShow({ radioId: this.radioId, radioName: this.radioName });
            uni.navigateBack();
            console.log(this.radiovalue)
        },
        groupChange(value) {
            // console.log(item)
            console.log('选择')
            console.log(value.item)
            this.radiovalue = value.name
            this.radioId = value.item.id
            this.radioName = value.item.name
            console.log(this.radioName)

        },
        nextLevel(value) {
            if (value.hasChild) {
                this.cheackedList.push(value)
                this.getTreeBy(value.id)
            }
        },
        getTreeBy(value) {
            console.log(value)
            this.$http.get('promotion/assort/get_tree_by/' + value).then(val => {
                console.log(val)
                // this.treeList = val.data
                this.treeList = val.data;

            })
        },
        //获取选中的值
        confirm(val, back) {
            if (back) {
                this.backConfirm(val)
                return
            }
            this.backList = val;
        },

        // 返回上一页传参
        backConfirm(val) {
            uni.$emit('selectSuccess', { list: val })
            uni.navigateBack();
        }
    }
}
</script>

<style lang="scss">
.selecttree {
    .item {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #eaeaea;
        width: 100vw !important;
        padding: 30rpx !important;
    }
    .u-radio__icon-wrap {
        width: 40rpx !important;
        height: 40rpx !important;
    }
    .u-radio {
        display: contents !important;
        text {
            font-size: 30rpx !important;
        }
    }
    padding-bottom: 150rpx;
    .buttonBox {
        position: absolute;
        width: 100vw;
        bottom: 0;
        margin-bottom: 30rpx;
        button {
            width: 80%;
            margin: 0 auto;
        }
    }
    .jiantou {
        position: absolute;
        right: 20rpx;
        display: flex;
        justify-content: space-between;
        width: calc(100vw - 100rpx);
    }
    .checkedBox {
        overflow: hidden;
        background-color: #eaeaea;
    }
    .checkedItem {
        float: left;
        padding: 20rpx 0 20rpx 20rpx;
        font-size: 28rpx;
        color: $themeColor;
        display: flex;
        justify-content: center;
        text {
            margin-left: 10rpx;
            font-size: 24rpx !important;
        }
    }
    .radioBox {
        overflow: hidden;
    }
}
.box_sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn {
    position: fixed;
    bottom: 0;
    padding: 10px;
    background-color: #fff;
    width: 100%;

    .sureBtn {
        background-color: #0095f2;
        color: #fff;
    }
}
</style>
